{% extends "base.html" %}
{# vim: set sw=2 ts=2 expandtab: #}

{% block head %} 
<title>Search Party - Student Login</title>

<script type="text/javascript">
// <![CDATA[
    var g_lessons = {{ lessons_json|safe }};

    $(document).ready(function() {
        $(".login_box").keyup(function(event) {
            if (event.which == 13) {   // Enter key
                login(event);
            }    
        });
       
        $('#login_button').click(function(event) {
            login(event);
        });
               
        //createLessonListForStudents();
        
        ////createTeacherFilter();
        //$('#teacher_filter').change(function() {
        //    createLessonListForStudents($('#teacher_filter').val());
        //});
    });

    function login(event) {
        $.post("/student_login_handler", 
            {
                "lesson_code": $('#lesson_code_field').val(),
                "student_nickname": $('#student_nickname').val(),
                "ext": "{{ext}}"
            }, 
            login_callback, 'json');
        }

    function login_callback(data) {
        status = data['status'];
        if (status == 'logged_in') {
            if (data['ext']===1) {
                window.location.replace("/html/student_ext.html");
            }
            else {
                window.location.replace("/student");
            }
            
        }
        else if (status == 'logged_out') {
            window.location.replace("/student_login");
        }
    }
    
    function createLessonListForStudents(teacher) {
        var html = '';
        var count = 0;
        for (var i=0; i<g_lessons.length; i++) {
            var lesson = g_lessons[i];
            if (lesson.is_active && (teacher==undefined || teacher=="" || lesson.teacher_name==teacher)) {
                html += getLessonHtml(lesson);
                count++;
            }
        } 
             
        if (count>0) {    
            $('#lesson_list').accordion('destroy');          
            $('#lesson_list').html(html);         
            $('#lesson_list').accordion({
                collapsible: true, 
                active: false
            });
        }
    }
    
    function getLessonHtml(lesson) {
        var lessonCode = lesson.lesson_code;
        var customStyles = '';
        var selectButton = '<button class="cssbtn smallest" style="padding:5px !important;" onclick="event.stopPropagation(); $(\'#lesson_code_field\').val(\''+lessonCode+'\');" title="Select activity"><span class="check_icon_only"></span></button>';
        var html = '<h3 id="'+lessonCode+'"><div class="right" style="margin-top:5px;margin-right:5px;">'+selectButton+' #'+lessonCode+'</div><a href="#" style="margin:0px;">'+lesson.title+'</a></h3>'

        html += '<div>';
        if (lesson.class_name) {
            html += '<h5>'+lesson.class_name + '</h5>';
        }
        else {
            customStyles = 'style="padding-top:0; margin-top:0;"';
        }
        if (lesson.description) {
            html += '<p class="lesson_description" '+customStyles+'>'+lesson.description + '</p>';
        }
        if (lesson.teacher_name) {
                html += '<h5>Teacher</h5>';
                html += '<p><ul><li>'+lesson.teacher_name+'</li></ul></p>';
        }
    
        html += '<h5>Tasks</h5>';
        html += '<ol>';
        $.each(lesson.tasks, function(i, task) {
            var taskTitle = task[0];
            var taskDescription = task[1];
            html += '<li>'+(i+1)+'. '+taskTitle+'</li>';
        });
        html += '</ol>';
        
        html += '<ul>';
        html += '<li class="left">';
        html += '<button id="select_lesson_btn" onclick="$(\'#lesson_code_field\').val(\''+lessonCode+'\');" class="cssbtn smallest">Select Activity<span class="check_icon"></span></button>';
        html += '</li>';
        html += '</ul>';
        html += '<div style="clear: both"></div>';
    
        html += '</div>';
        return html;
    }
    
    function createTeacherFilter() {
        var teachers = getTeachers();
        if (teachers.length>0) {
            var html = '<select id="teacher_filter">';
            html += '<option value="">All Teachers</option>';
            for (var i=0; i<teachers.length; i++) {
                html += '<option value="'+teachers[i]+'">'+teachers[i]+'</option>';
            }
            html += '</select>';
            $('#lesson_filter').html(html);
        }
    }
    
    function getTeachers() {
        var teachers = [];
        for (var i=0; i<g_lessons.length; i++) {
            var lesson = g_lessons[i];
            var teacherName = lesson.teacher_name;
            if (teacherName && $.inArray(teacherName, teachers)==-1) {
                teachers.push(teacherName);
            }
        }
        teachers.sort();
        return teachers;
    }
    
// ]]>
</script>  
{% endblock %}

{% block body %} 
    <div class="container_16 cntrmain">
	   <div class="grid_16 branding">
		  {{ header|safe }}
		  {% if msg %}<div class="msg"><p>{{ msg }}</p></div>{% endif %}
	      <div class="clear"></div>
	   </div><!--- end grid_16 -->
    </div><!-- end container_16 -->

    <div class="container_16">
	   <div class="grid_16 main">
	      <header class="info">
            <h2>Student login</h2>
          </header>
          <div id="content">
		  <form>
		    <ul>
                <li>
				    <span>
						<label class="desc">Student name:</label>
						<input type="text" id="student_nickname" value="" class="login_box field text fn" name="student_nickname"><br/>
					    <span class="note">Leave empty to login anonymously</span>
					</span>
				</li>
				<li>
					<span>
					   <label class="desc">Activity code:</label>
					   <input type="text" id="lesson_code_field" value="" class="login_box field text fn" name="lesson_code">
					</span>
				</li>
				<li>
					<div class="frmtxt"><input type="button" id="login_button" class="cssbtn" value="Login"></div>
				</li>
			</ul>
		  </form>

          <!--
		  <h3 style="margin-top:15px">Activities <span id="lesson_filter" style="margin-left:5px"></span></h3>
          <div id="lesson_list" class="accordion2" style="max-width:700px">(none)</div>
          -->
          </div><!-- end content -->
       </div><!--- end grid_16 -->
    </div><!--- end container_16-->
</div>
{% endblock %}